<!--店铺管理页 StoreView.vue-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">店铺管理</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="beforeAddBusiness">新建门店</el-button>
  </div>
  <!-- 店铺查询卡片 -->
  <el-card style="margin:20px;height: 140px;">
    <el-form :inline="true">
      <el-form-item label="门店名称">
        <el-input placeholder="请输入" style="width:300px;"
                  v-model="SearchForm.name" ></el-input>
      </el-form-item>
      <el-form-item label="负责人联系方式">
        <el-input placeholder="请输入联系方式" style="width:300px;"
                  v-model="SearchForm.phone" ></el-input>
      </el-form-item>
      <el-form-item label="所属区域">
        <el-select v-model="SearchForm.address" placeholder="请选择查询的省/市/区县" style="width:300px;">
          <el-option v-for="item in addressList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :inline="true">
      <el-form-item label="入住日期" style="width:290px;">
        <el-date-picker
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
            v-model="times"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="门店状态" style="width:300px;">
        <el-select placeholder="请选择" v-model="SearchForm.status" @change="loadGeo">
          <el-option label="全部" value="0"/>
          <el-option label="启用" value="1"/>
          <el-option label="禁用" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadGeo">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 店铺列表表格数据 -->
  <el-card style="margin:20px;">
    <h3>店铺列表</h3>
    <el-table stripe :data="geoTableData">
      <el-table-column label="编号" prop="id" type="index" align="center" width="100"></el-table-column>
      <el-table-column label="门店名称" prop="storeName" align="center"></el-table-column>
      <el-table-column label="商家地址" prop="storeLocation" align="center"></el-table-column>
      <el-table-column label="门店电话" prop="storePhone" align="center"></el-table-column>
      <el-table-column label="负责人" prop="storeHeadName" align="center"></el-table-column>
      <el-table-column label="联系电话" prop="storeHeadPhone" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
      <el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column>
      <el-table-column label="启用状态" align="center">
        <template #default="scope">
          <el-switch inactive-value="0" active-value="1" v-model="scope.row.status"
                     @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="">编辑</el-button>
          <el-button type="primary" link @click="deleteStore(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 新建门店弹窗 -->
  <el-dialog title="新建商家" v-model="DialogVisible" style="padding:40px;">
    <el-form>
      <el-form-item label="商家名称">
        <el-select  placeholder="请选择商家" style="width:300px;"
                    v-model="newStoreForm.name">
          <el-option label="请选择" value=""></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="门店名称">
        <el-input placeholder="请输入门店名称" style="width:300px;"
                  v-model="newStoreForm.storeName" ></el-input>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="门店电话">
        <el-input placeholder="请输入门店电话" style="width:300px;"
                  v-model="newStoreForm.storePhone" ></el-input>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label=" 负责人：">
        <el-input placeholder="请输入负责人" style="width:300px;"
                  v-model="newStoreForm.storeHeadName" ></el-input>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item label="负责人电话">
        <el-input placeholder="请输入负责人电话" style="width:300px;"
                  v-model="newStoreForm.storeHeadPhone" ></el-input>
      </el-form-item>
      <el-form-item label="门店地区" >
        <el-select placeholder="省" style="width:150px;">
          <el-option v-for="item in provinceList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select placeholder="市" style="width:150px;">
          <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select placeholder="区" style="width:150px;">
          <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细店址">
        <el-input placeholder="请输入详细地址" style="width:300px;"
                  v-model="newStoreForm.storeLocation" ></el-input>
      </el-form-item>
      <el-form-item label="门店坐标">
        <el-input placeholder="请输入详细地址" style="width:300px;"
                  v-model="newStoreForm.latitude" ></el-input>
      </el-form-item>
      <el-form-item label="门店图片">
        <el-upload>
        </el-upload>
      </el-form-item>
      <el-form-item label="门店logo">
        <el-upload>
        </el-upload>
      </el-form-item>
      <el-form-item label="商家简介">
        <el-input placeholder="请输入商家简介" style="width:300px;"
                  v-model="newStoreForm.storeIntroduction" ></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-select placeholder="请选择" style="width:300px;">
          <el-option label="升序" value="0"></el-option>
          <el-option label="降序" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="营业时间">
        <el-input placeholder="请输入营业时间" style="width:300px;"
                  v-model="newStoreForm.openTime" ></el-input>
      </el-form-item>
      <el-form-item label="门店状态">
        <el-radio-group  v-model="newStoreForm.status">
          <el-radio  label="开启" value="1" ></el-radio>
          <el-radio  label="禁用" value="0"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveStore = false">确定</el-button>
        <el-button @click="resetStore = false">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
// 新建门店弹窗状态
const DialogVisible = ref(false);
//点击 新建门店弹窗出现
const beforeAddBusiness=()=>{
  DialogVisible.value = true;
}
//定义数组用来保存门店表格数据的入住时间
const times =ref([]);
//定义搜索门店的表单数据
const SearchForm = ref({name: '', phone:'',address:'',status: ''})
const addressList=ref([]);
//定义数组用来保存店铺列表的表格数据
const geoTableData = ref([]);
//定义加载店铺列表的方法
const load = ()=>{
  let data = qs.stringify(SearchForm.value);
  // axios.get(BASE_URL+'/v1/geofence/select?'+data).then((response)=>{
  //   if(response.data.code == 2000){
  //     geoTableData.value = response.data.data;
  //   }else{
  //     ElMessage.error(response.data.msg);
  //   }
  // })
}
onMounted(()=>{
  load();
})
//定义重置搜索的方法
const resetSearch = ()=>{
  geoSearchForm.value = {name: '', status: ''};
  load();
}
//定义数组用来保存新建门店弹窗的表单数据
const newStoreForm = ref({
  name: '',
  storeName: '',
  storePhone: '',
  storeHeadName: '',
  storeHeadPhone: '',
  storeLocation: '',
  storeLatitude: '',
  province: '',
  city: '',
  area: '',
  storeLogo: '',
  storeImg: '',
  storeIntroduction: '',
  sort: '',
  openTime: '',
  storeStatus: '',
});
//定义保存新建门店的方法
const saveStore = ()=>{}
const resetStore=()=>{}
//定义修改店铺列表的启用状态的方法
const changeStatus = (id,status)=>{
  let data = qs.stringify({id:id,status:status});
  // axios.post(BASE_URL+'/v1/geofence/save',data).then((response)=>{
  //   if(response.data.code==2000){
  //     ElMessage.success('状态修改成功!');
  //   }else{
  //     ElMessage.error(response.data.msg);
  //   }
  // })
}
//定义删除店铺的方法
const deleteStore = (id)=>{
  if(confirm('您确认要删除本店铺吗?')){
  }
}
</script>



<style scoped>
</style>